<template>
  <div>
    <keep-alive>
      <router-view></router-view>
    </keep-alive>
    <van-tabbar
      v-model="active"
      @change="toggleItem"
    >
      <van-tabbar-item icon="wap-home-o">首页</van-tabbar-item>
      <van-tabbar-item icon="gift-o">商品</van-tabbar-item>
      <van-tabbar-item icon="shopping-cart-o">购物车</van-tabbar-item>
      <van-tabbar-item icon="contact">个人中心</van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
export default {
  data() {
    return {
      active: 0,
      nowPath: ''
    }
  },
  created() {
    this.switchItemActive()
  },
  updated() {
    this.switchItemActive()
  },
  methods: {
    switchItemActive() {
      this.nowPath = this.$route.path
      if(this.nowPath === '/cart'){
        this.active = 2
      }
    },
    toggleItem(act) {
      switch (act) {
        case 0:
          this.$router.push({ name: 'ShoppingMail' })
          break;
        case 1:
          this.$router.push({ name: 'CategoryList' })
          break;
        case 2:
          this.$router.push({ name: 'Cart' })
          break;
        case 3:

      }
    }
  }
}
</script>

<style scoped>
</style>